<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Leaflet Geometry Management</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>

  <script src="jquery-3.2.1.min.js"></script>

  <!-- ==引用移动鼠标获得经纬度== -->
  <link rel="LeafletMousePosition/L.Control.MousePosition.css" />
  <script src="LeafletMousePosition/L.Control.MousePosition.js"></script>

  <!-- ==引用右击获得经纬度的文件== -->
  <script src="LeafletMousePosition/leaflet-locationpicker.js"></script>
  <link rel="LeafletMousePosition/leaflet-locationpicker.css" />

  <!-- Load Esri Leaflet from CDN -->
    <script src="esri-leaflet-v3.0.8/esri-leaflet.js"></script>
    <script src="esri-leaflet-v3.0.8/esri-leaflet-vector.js"></script>

  

  <link rel="stylesheet" href="dist/leaflet-geoman.css" />
  <script src="dist/leaflet-geoman.min.js"></script>
  <style>
    html,
    body {
      font-family: Arial, Verdana;
      background-color: #eef1ef;
      font-size: 16px;
      width: 100%;
      height: 100%;
      margin: 0;
    }

    .wrapper {
      width: 100%;
      height: 100%;
    }

    #mapContainer {
      height: 720px;
      width: 360px;
    }

    #chart-container {
      width: 460px;
      height: 720px;
      float: left;
    }

    #ArcGISmapContainer {
      width: 560;
      height: 720px;
      float: right;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="mapContainer"></div>
    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script> -->

    <script type="text/javascript">
      var map = L.map('mapContainer').setView([32.180188, 118.697804], 16);   //L.map(div的ID).setView[纬度，经度],缩放（大小）层级
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar' },
        {
          maxZoom: 19,
          attribution: '© OpenStreetMap'
        }
      ).addTo(map);//添加地图到定义的map里面

      L.marker([32.180188, 118.697804], { pmIgnore: true }).addTo(map); //添加地图标签
;
      // add Leaflet-Geoman controls with some options to the map  
      map.pm.addControls({
        position: 'topleft',
        drawCircle: false,
      });
      // make polygon not snappable during draw  
      map.pm.enableDraw('Polygon', { snappable: false });
      map.pm.disableDraw();
      // disable Draw Mode
      map.pm.disableDraw();
    </script>

    <div id="ArcGISmapContainer"></div>
    <script src="js/EsriLeaflet_Switchingbasemap.js">//选择多种基础图层</script> 
    <script>
        // var map = L.map('ArcGISmapContainer').setView([30.70, -81.47], 12);
        // L.esri.tiledMapLayer({
        //     //AecGIS地图服务链接
        //     url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer'
        // }).addTo(map);
    </script>
    
  

  </div>
</body>

</html>